import React, { Component } from 'react'

export class TodoFooter extends Component {
  render() {
    const {itemList,type} = this.props
    const isShow = itemList.some(item => item.finish === true)
    return (
      <footer className="footer">
          <span className="todo-count">
            <strong>{itemList.filter(item => item.finish !== true).length}</strong> item left
          </span>
          <ul className="filters">
            <li>
              <a className={ type === 'all' ? 'selected' : ''} onClick={() => this.cgList('all')} href="#/">
                All
              </a>
            </li>
            <li>
              <a className={ type === 'active' ? 'selected' : ''} onClick={() => this.cgList('active')} href="#/active">Active</a>
            </li>
            <li>
              <a className={ type === 'completed' ? 'selected' : ''} onClick={() => this.cgList('completed')} href="#/completed">Completed</a>
            </li>
          </ul>
          {isShow ? <button className="clear-completed" onClick={this.clearItem}>Clear completed</button> : null}
      </footer>
    )
  }

  cgList = (type) => {
    this.props.cgListByType(type)
  }

  clearItem = () => {
    this.props.clearItemByState()
  }
}

export default TodoFooter